<template>
	<view class="container" @click="blurInput()">
		<view class="userInfoCard">
			<view style="float: left;">
				<image id="profile" :src="detailInfo.profilePath"></image>
			</view>
			<view style="float: left;margin: 20rpx;">
				<text>{{detailInfo.username}}</text>
			</view>
		</view>
		<view class="content ">
			<view>
				<view v-if="detailType==1">
					<view class="shadow-text">
						<view class="fancy-title">{{detailInfo.name}}</view>
						<view>{{detailInfo.desc}}</view>
					</view>
					<view style="width: 100%;">
						<image :src="detailInfo.imagePath" mode="aspectFill"></image>
					</view>
					<view style="color: #6f6878;font-size: 28rpx;">
						<view>联系电话:{{detailInfo.phone}}</view>
						<view>地址:{{detailInfo.fullAddress}}</view>
						<view>详细地址:{{detailInfo.detailAddress}}</view>
					</view>
				</view>
				<view v-if="detailType==2">
					<view class="shadow-text">
						<view class="fancy-title">{{detailInfo.title}}</view>
						<view>{{detailInfo.desc}}</view>
					</view>
					<view style="width: 100%;">
						<image :src="detailInfo.imagePath" mode="aspectFill"></image>
					</view>
					<view style="color: #6f6878;font-size: 28rpx;">
						<view>联系电话:{{detailInfo.phone}}</view>
						<view>地址:{{detailInfo.fullAddress}}</view>
						<view>详细地址:{{detailInfo.detailAddress}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="divider" style="margin-top: 20rpx ;"></view>
		<view style="color: #6f6878;font-weight: bold;">评论区</view>
		<view class="commentContent">
			<view class="comment-card" v-for="comment in comments"
				@click.native.stop="changeFocusComment(comment.userId,comment.id)">
				<view style="height: 80rpx;">
					<view style="float: left;">
						<image :src="comment.profilePath" mode="aspectFill"
							style="width: 75rpx;height: 75rpx;border-radius: 35rpx;"></image>
					</view>
					<view style="float: left;padding-left: 10rpx;padding-top: 15rpx;">{{comment.username}}</view>
				</view>
				<view>
					{{comment.content}}
				</view>
				<view v-for="childItem in comment.commentList" style="margin-left: 25rpx;"
					@click.native.stop="changeFocusComment(childItem.userId,comment.id)">
					<view style="float: left;width: 80rpx;">
						<image :src="childItem.profilePath"
							style="width: 50rpx;height: 50rpx;border-radius: 35rpx;float: right;"></image>
					</view>
					<view style="padding-left: 100rpx;">
						<view style="color: #8f8f8f;"><text>{{childItem.username}}</text><uni-icons type="right"
								size="11" color="#999"></uni-icons>{{childItem.responseUsername}}</view>
						<view>
							{{childItem.content}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="commentInputBox" style="background-color: white;">
		<text style="float: left;">发布评论:</text>
		<view style="margin-left: 20rpx;float: left;border-bottom: 1rpx solid black;">
			<input placeholder="文明发言" style="" v-model="inputComment" :focus="isFocusInput" />
		</view>
		<view style="float: right;margin-left: 30rpx;padding-right: 20rpx;" @click="submitComment">发布></view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import {
		baseUrl
	} from '../../static/js/common';
	let selectedId = '';
	let detailInfo = ref({
		profilePath: ''
	})
	let authorization = localStorage.getItem("token")
	let detailType = ref(0)
	let isFocusInput = ref(false)
	let responseUserId = 0;
	let parentCommentId = 0;
	let inputComment = ref('')
	let comments = ref([])

	function fillComment() {
		let params = {}
		if (detailType.value == 1) {
			params.animalId = selectedId
		} else if (detailType.value == 2) {
			params.postId = selectedId;
		}
		uni.request({
			url: baseUrl + '/comment/list',
			data: params,
			header: {
				'Authorization': authorization
			},
			method: 'POST',
			success: (res) => {
				console.log(res.data)
				comments.value = res.data.data
			}
		})
	}

	function blurInput() {
		isFocusInput.value = false
		responseUserId = 0;
		parentCommentId = 0;
	}

	function changeFocusComment(userId, commentId) {
		responseUserId = userId;
		parentCommentId = commentId;
		isFocusInput.value = true
	}

	function submitComment() {
		let user = localStorage.getItem("userInfo")
		let userId = JSON.parse(user).id

		let params = {
			parentId: parentCommentId,
			content: inputComment.value,
			userId: userId,
			responseUserId
		}
		if (detailType.value == 1) {
			params.animalId = selectedId
		} else if (detailType.value == 2) {
			params.postId = selectedId;
		}
		console.log(inputComment.value)
		uni.request({
			url: baseUrl + '/comment/save',
			data: params,
			method: 'POST',
			header: {
				'Authorization': authorization
			},
			success: (res) => {
				requestDetail()
				fillComment()
			}
		})
	}

	function requestDetail() {
		let requestType = ''
		if (detailType.value == 1) {
			requestType = 'animal'
		} else if (detailType.value == 2) {
			requestType = 'post'
		}
		uni.request({
			url: baseUrl + '/' + requestType + '/get',
			method: 'GET',
			data: {
				'id': selectedId
			},
			success: (res) => {
				detailInfo.value = res.data.data
				console.log(detailInfo.value)
			}
		})
	}

	onShow(() => {
		selectedId = sessionStorage.getItem("selectedId")
		detailType.value = sessionStorage.getItem("detailType")
		requestDetail()
		fillComment()
	})
</script>

<style scoped lang="scss">
	#profile {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50rpx;
	}

	.container {
		padding: 10rpx;
		padding-bottom: 200rpx;
	}

	.userInfoCard {
		padding-top: 20rpx;
		width: 100%;
		height: 120rpx;
	}

	.content {
		padding-left: 20rpx;
	}



	.divider {
		background: #E0E3DA;
		width: 100%;
		height: 5rpx;
	}




	//字体样式
	/* 基础字体样式 */
	.fancy-title {
		font-size: 48rpx;
		font-family: 'Helvetica Neue', sans-serif;
		font-weight: 600;
		color: #2c3e50;
		letter-spacing: 2rpx;
		margin: 20rpx 0;
	}

	.modern-text {
		font-size: 32rpx;
		font-family: -apple-system, system-ui;
		color: #5e6d82;
		line-height: 1.6;
	}

	/* 高级文字效果 */
	.gradient-text {
		background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		font-size: 40rpx;
		font-weight: bold;
	}

	.shadow-text {
		text-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.2);
		font-size: 36rpx;
		color: #34495e;
	}

	.stroke-text {
		-webkit-text-stroke: 2rpx #3498db;
		color: transparent;
		font-size: 44rpx;
		font-weight: 800;
	}

	/* 动态效果 */
	.hover-effect {
		font-size: 36rpx;
		color: #2ecc71;
		transition: all 0.3s;

		&:active {
			transform: scale(1.05);
			color: #27ae60;
			text-shadow: 0 0 10rpx rgba(46, 204, 113, 0.3);
		}
	}

	.dynamic-text {
		font-size: 40rpx;
		transition: color 0.5s;

		&.animate {
			color: #e74c3c;
			animation: colorPulse 1.5s infinite;
		}
	}

	@keyframes colorPulse {
		0% {
			opacity: 0.8;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0.8;
		}
	}

	/* 推荐字体家族 */
	.font-serif {
		font-family: 'Times New Roman', serif;
	}

	.font-mono {
		font-family: 'Courier New', monospace;
	}

	.font-cursive {
		font-family: 'Brush Script MT', cursive;
	}

	/* 特殊场景样式 */
	.price-text {
		font-size: 64rpx;
		color: #e74c3c;
		font-weight: 700;

		&::before {
			content: '¥';
			font-size: 0.8em;
		}
	}

	.timestamp {
		font-size: 24rpx;
		color: #95a5a6;
		letter-spacing: 1rpx;
	}

	.commentInputBox {
		border-top: 1rpx solid #8f8f8f;
		padding-top: 20rpx;
		padding-right: 10rpx;
		position: fixed;
		bottom: 0rpx;
		height: 100rpx;
		width: 100%;
	}

	.comment-card {
		padding: 20rpx;
	}
</style>